<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				position: relative;
			}
			div {
				width: 160px;
				height: 160px;
				background-color: pink;
				position: absolute;
				left: 0;
				top: 0;
				transition: all 1s linear;
			}

			.oneclick {
				left: 500px;
				top: 0;
				background-color: palevioletred;
			}
			.twoclick {
				left: 500px;
				top: 500px;
				background-color: plum;
			}
			.threeclick {
				left: 0;
				top: 500px;
				background-color: lightpink;
			}
			.fourclick {
				left: 0;
				top: 0;
				background-color: lightsalmon;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			let div = document.querySelector('div');
			/* 			//基于一个自定义事件类
			let myevent = new EventTarget();
			//绑定自定义事件
			myevent.addEventListener('myevent', function () {
				// console.log('自定义事件');
				div.style.left = 500 + 'px';
			});
			myevent.addEventListener('myevent2', function () {
				// console.log('自定义事件');
				div.style.top = 500 + 'px';
			});
			myevent.addEventListener('myevent3', function () {
				// console.log('自定义事件');
				div.style.left = 0 + 'px';
			});
			myevent.addEventListener('myevent4', function () {
				// console.log('自定义事件');
				div.style.top = 0 + 'px';
			}); */

			//触发自定义事件（回调地狱版）
			/* 	document.querySelector('div').onclick = function () {
				myevent.dispatchEvent(new CustomEvent('myevent')); //第一个

				document.querySelector('div').addEventListener('transitionend', () => {
					myevent.dispatchEvent(new CustomEvent('myevent2')); //第二个

					document.querySelector('div').addEventListener('transitionend', () => {
						myevent.dispatchEvent(new CustomEvent('myevent3')); //第三个

						document.querySelector('div').addEventListener('transitionend', () => {
							myevent.dispatchEvent(new CustomEvent('myevent4')); //第四个
						});
					});
				});
			};
 */
			//promise版

			function fn1() {
				// console.log('1111');
				return new Promise(res => {
					setTimeout(() => {
						div.className = 'oneclick';
						res();
					}, 1000);
				});
			}
			function fn2() {
				return new Promise(res => {
					setTimeout(() => {
						// div.style.top = 500 + 'px';
						div.className = 'twoclick';
						res();
					}, 1000);
				});
			}
			function fn3() {
				return new Promise(res => {
					setTimeout(() => {
						// div.style.left = 0 + 'px';
						div.className = 'threeclick';
						res();
					}, 1000);
				});
			}
			function fn4() {
				return new Promise(res => {
					setTimeout(() => {
						// div.style.top = 0 + 'px';
						div.className = 'fourclick';
						res();
					}, 1000);
				});
			}
			document.querySelector('div').onclick = () => {
				fn1()
					.then(() => {
						return fn2();
					})
					.then(() => {
						return fn3();
					})
					.then(() => {
						return fn4();
					});
			};
		</script>
	</body>
</html>
